<template>
  <div>
    <span>用户名：<input type="text" v-model="obj.username" /></span>
    <span>密码：<input type="text" v-model="obj.password" /></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        username: "",
        password: "",
      },
    };
  },
  //直接修改obj的值（例如赋予一个新的对象，才能出发监听器函数执行）
  watch: {
    obj: {
      handler(newVal, oldVal) {
        //handler方法名固定
        console.log(newVal, oldVal);
      },
      deep: true, //深度侦听（）对象里的属性值改变了，也会触发handler函数
      immediate: true, //立即侦听（网页刚打开，就会让handler触发一次）
    },
  },
};
</script>

<style>
</style>